<template>
  <!-- 我的关系页面 -->
  <div class="content">
    <div class="myAttention layout">
      <h3>关注:</h3>
      <div class="detail">
        <!-- 逻辑：主动时 你是uuid他是hhid，展示hhid的数据 -->
        <div class="detail-item" v-for="item in drivingData" :key="item.id">
          <img :src="item.heuser_pic" />
          <div class="userinfo">
            <h3>
              {{item.henickname?item.henickname:'匿名'}}
              <i
                :class="['iconfont',item.hegender===1?'icon-xingbienan':item.hegender===0?'icon-xingbienv':'']"
              ></i>
            </h3>
            <p class="timer">机遇时间：{{timer(item.timer)}}</p>
          </div>
          <span @click="visithome(item.hhId)">访问主页></span>
        </div>
        <router-link v-if="drivingData.length === 0" to="/confessionWall">你还没有机遇,点击去寻找</router-link>
      </div>
    </div>
    <div class="myAttention layout">
      <h3>粉丝:</h3>
      <div class="detail">
        <!-- 逻辑：被动时 你是hhid他是uuid，展示uuid的数据 -->
        <div class="detail-item" v-for="item in passivityData" :key="item.id">
          <img :src="item.myuser_pic" />
          <div class="userinfo">
            <h3>
              {{item.mynickname?item.mynickname:'匿名'}}
              <i
                :class="['iconfont',item.mygender===1?'icon-xingbienan':item.mygender===0?'icon-xingbienv':'']"
              ></i>
            </h3>
            <p class="timer">机遇时间：{{timer(item.timer)}}</p>
          </div>
          <span @click="visithome(item.uuId)">访问主页></span>
        </div>
        <router-link v-if="passivityData.length === 0" to="/confessionWall">你还没有机遇,点击去寻找</router-link>
      </div>
    </div>
  </div>
</template>

<script>
// 引入第三方库dayjs
import dayjs from "dayjs";
export default {
  data() {
    return {
      drivingData: [], //主动数据
      passivityData: [], //被动数据
    };
  },
  mounted() {
    // 判断是阅读者还是使用者
    if (this.$route.params.isMine) {
      this.getrealtion();
    } else {
      this.visitrealtion();
    }
  },
  methods: {
    // 获取我的关系数据回调
    async getrealtion() {
      let result = await this.$API.getrealtion();
      this.handleResult(result);
    },
    // 处理结果的回调
    handleResult(result) {
      let { drivingData, passivityData } = this;
      // 判断 如果查询成功且结果不等于0 就对结果分组
      if (result.code === 200 || result.data.length !== 0) {
        result.data.forEach((item) => {
          if (item.driving === item.userId) {
            //主动
            drivingData.push(item);
          } else {
            //被动
            passivityData.push(item);
          }
        });
      } else {
        return this.$message(result.message);
      }
    },
    // 访问我的关系回调
    async visitrealtion() {
      let result = await this.$API.visitrealtion(this.$route.params.uuId);
      this.handleResult(result);
    },
    // 访问首页
    visithome(id) {
      // 跳转到主页
      this.$router.push({
        name: "/mine",
        params: { uuId: id },
      });
      // 告诉父组件到第一个模块去
      this.$emit("backcut");
    },
  },
  computed: {
    // 解决mysql返回值带z带t问题
    timer() {
      return (timer) => {
        return dayjs(timer).format("YYYY-MM-DD HH:mm:ss");
      };
    },
  },
};
</script>

<style lang="less" scoped>
.content {
  .layout {
    margin: 10px 0 30px 0;
    display: flex;
    justify-content: start;
  }
  h3 {
    margin-right: 20px;
    font-weight: 600;
    color: #008c8c;
  }
  .detail {
    width: 80%;
    a:hover {
      color: #008c8c;
    }
    .detail-item {
      border-bottom: 1px solid #008c8c;
      padding: 5px 0;
      display: flex;
      justify-content: start;
      img {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        margin-right: 10px;
      }
      .userinfo {
        width: 80%;
        h3 {
          font-size: 16px;
          font-weight: 700;
          i {
            margin-left: 10px;
          }
          .icon-xingbienan {
            color: skyblue;
          }
          .icon-xingbienv {
            color: skyblue;
          }
        }
        .timer {
          font-size: 12px;
          color: #8590a6;
        }
      }
      span {
        line-height: 40px;
        font-size: 12px;
        color: #121212;
        cursor: pointer;
      }
      span:hover {
        color: #008c8c;
      }
    }
  }
}
</style>